<template>
	<view class="container">
		<view class="group-box">
			<view class="promo-list">
				<!--循环.开始-->
				<navigator v-for="(item,index) in listData" 
					:key="index" 
					:url="'show?id='+item.goodsProduct.shopGoods.id+'&pid='+item.goodsProduct.id" 
					class="list-box">
					<view class="img-box">
						<image mode="widthFix" :src="$api.loadFile(item.goodsProduct.imgUrl?item.goodsProduct.imgUrl:item.goodsProduct.shopGoods.imgUrl)"></image>
					</view>
					<view class="info">
						<text class="title">{{item.title}}</text>
						<view class="time-box">
							<view class="time-box">
								<text>离活动结束</text>
								<uni-countdown
									:day="item.countDown.d" 
									:hour="item.countDown.h" 
									:minute="item.countDown.m" 
									:second="item.countDown.s">
								</uni-countdown>
							</view>
						</view>
						<view class="price-box">
							<text class="price">{{item.totalPrice}}</text>
							<text class="original">{{item.goodsProduct.sellPrice}}</text>
							<text class="label">预售中</text>
						</view>
					</view>
				</navigator>
				<!--循环.结束-->
				<uni-load-more :status="loadingType" @clickLoadMore="loadData('add')"></uni-load-more>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadingType: "more", //加载状态
				totalCount: 0, //总数量
				totalPages: 0, //总页数
				pageSize: 10, //每页显示条数
				pageIndex: 1, //当前页码
				listData: [], //数据列表
			}
		},
		methods: {
			//初始化数据,带下滑刷新和上滑加载
			async loadData(type='add', loading){
				let _this = this;
				//上滑加载更多
				if(type === 'add'){
					if(_this.loadingType === 'nomore'){
						return;
					}
					_this.loadingType = 'loading';
				}
				//下滑刷新
				else{
					_this.pageIndex=1;
					_this.listData=[];
					_this.loadingType="more";
				}
				
				//加载地址列表
				await _this.$api.request({
					url: `/client/shop/presell?pageSize=${_this.pageSize}&pageIndex=${_this.pageIndex}`,
					method: "get",
					loading: true
				}).then(res=>{
					//console.log(res.data)
					let pageInfo = JSON.parse(res.header["x-pagination"]);
					_this.totalCount = pageInfo.totalCount;
					_this.totalPages = pageInfo.totalPages;
					let listData = res.data;
					listData.forEach(item=>{
						item.countDown = _this.timeCount(item.actEndTime);
					});
					_this.listData = _this.listData.concat(listData);
				}).catch((err)=>{
					_this.loadingType="nomore";
					uni.stopPullDownRefresh();
				});
				
				//判断是否还有下一页
				if(_this.pageIndex >= _this.totalPages){
					_this.loadingType="nomore";
				}else{
					_this.pageIndex++;
					_this.loadingType="more";
				}
				//下滑隐藏动画及上滑事件
				if(type === 'refresh'){
					if(loading == 1){
						uni.hideLoading()
					}else{
						uni.stopPullDownRefresh();
					}
				}
			},
			//计算剩余时间
			timeCount(endTime){
				let date = new Date();
				let now = date.getTime();//获得当前时间与1970年1月1日时间相差的毫秒数
				let endDate = new Date(endTime.replace(/-/g, '/')); 
				let end = endDate.getTime();//结束时间与1970年1月1日时间相差的毫秒数
				let leftTime = end-now;//计算两日期之间相差的毫秒数
				let countDown = {};
				if (leftTime >= 0) {
					countDown.d = Math.floor(leftTime/1000/60/60/24);
					countDown.h = Math.floor(leftTime/1000/60/60%24);  
					countDown.m = Math.floor(leftTime/1000/60%60);  
					countDown.s = Math.floor(leftTime/1000%60);
				}
				//console.log(countDown)
				return countDown;
			},
		},
		//页面初始化
		onLoad(options){
			this.loadData('add');
		},
		//下滑刷新
		onPullDownRefresh(){
			this.loadData('refresh');
		},
		//上滑加载更多
		onReachBottom(){
			this.loadData('add');
		}
	}
</script>

<style lang="scss">
	.promo-list{
		.list-box{
			display: flex;
			justify-content: flex-start;
			margin-bottom: 24rpx;
			padding: 30rpx;
			border-radius: 20rpx;
			background: #fff;
			.img-box{
				flex-shrink: 0;
				display: flex;
				align-items: center;
				width: 168rpx;
				height: 168rpx;
				background-color: #f5f5f5;
				image{
					width: 100%;
				}
			}
			.info{
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				position: relative;
				margin-left: 24rpx;
				width: calc(100% - 216rpx);
				.title{
					display: block;
					width: 100%;
					color: #333;
					font-size: 30rpx;
					line-height: 1;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
				.time-box{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin-top: 10rpx;
					color: #999;
					font-size: 24rpx;
					line-height: 40rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
				.price-box{
					display: flex;
					align-items: center;
					margin-top: 10rpx;
					line-height: 1;
					.price{
						color: #f03446;
						font-size: 32rpx;
						&::before{
							content: "￥";
							font-size: 24rpx;
						}
					}
					.original{
						margin-left: 8rpx;
						color: #ccc;
						font-size: 24rpx;
						text-decoration: line-through;
						&::before{
							content: "￥";
							font-size: 24rpx;
						}
					}
					.label{
						position: relative;
						display: inline-block;
						margin-left: 20rpx;
						padding: 0 2rpx;
						height: 30rpx;
						line-height: 30rpx;
						color: #fff;
						font-size: 20rpx;
						background: #f03446;
						border-radius: 4rpx 4rpx 4rpx 0;
						&::after{
							content: "";
							position: absolute;
							bottom: -4rpx;
							left: 0;
							width: 0;
							height: 0;
							border-color: transparent transparent transparent #f03446;
							border-style: solid;
							border-width: 8rpx;
						}
						
					}
				}
			}
		}
	}
</style>